<template>
   <div>
     <el-dialog title="申诉" :visible.sync="isShow" @close="_closeDialog" width="680px">
       <div>
           <el-form :model="appealForm">
             <div class="order-info">
               <el-form-item label="订单号:" label-width="100px" v-if="appealForm.order_num">
                 <span>{{appealForm.order_num}}</span>
               </el-form-item>
               <el-form-item label="推手账号:" label-width="100px">
                 <span>{{appealForm.tb_name}}</span>
                 <span v-show=false>{{appealForm.push_id}}</span>
               </el-form-item>
               <el-form-item label="任务编号:" label-width="120px">
                 <span>{{appealForm.task_code}}</span>
               </el-form-item>
             </div>
             <div class="order-info">
                <el-form-item label="问题描述:" label-width="100px">
                  <el-select v-model="appealForm.content" placeholder="请选择问题描述" size="small">
                    <el-option v-for="(item,index) in problemOptions" :key="index" :label="item.content" :value="item.content"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="处置建议:" label-width="100px">
                  <el-select v-model="appealForm.treat_content" placeholder="请选择处置建议" size="small">
                    <el-option v-for="(item,index) in proposalOptions" :key="index" :label="item.content" :value="item.content"></el-option>
                  </el-select>
                </el-form-item>
             </div>

             <div class="upload-img">
               <div class="appeal-dialog-name">上传图片：</div>
               <div class="img-box">
                 <el-upload
                   ref= 'upload'
                   class="avatar-uploader"
                   :action="BASE_API_URL+'baseapi/wechart/uploadMerchantPushImg'"
                   :data="uploadData"
                   list-type="picture-card"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload"
                   :on-remove="handleRemove"
                   :limit="3"
                   :on-exceed="handleExceed">
                   <i class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
               </div>
             </div>
             <div class="proposal-div">
               <div class="appeal-dialog-name">申诉原因：</div>
               <el-input class="appeal-textarea" type="textarea" @blur="filterSpecialCharacters(appealForm)" rows="5"  v-model="appealForm.appeal_why" placeholder="请输入申诉原因"></el-input>
             </div>
             <div class="appleal-dialog-footer">
                 <el-button class="appleal-dialog-cancel-btn" @click="_closeDialog" size="small">取 消</el-button>
                 <el-button class="appleal-dialog-confirm-btn" :loading="submitLoading" @click="_confrimAppeal" size="small">确 定</el-button>
             </div>
           </el-form>
       </div>
     </el-dialog>
   </div>
</template>

<script>
  import {
    apiGetAppealList,
    apiDelImg,
    apiCreateAppealTask
  } from '../request/api.js'
  export default {
    props: {
      appealForm:{
       default: {}
      }
    },
    data () {
      return {
        isShow: true,
        token: '',
        problemOptions: [],
        proposalOptions: [],
        uploadData: {
          area: 'proof'
        },
        imgArr: [],
        submitLoading: false,
        userToken: window.localStorage.getItem('token')
      }
    },
    created () {
       this.getAppealOptions(1)
       this.getAppealOptions(2)

    },
    methods: {
      getAppealOptions(type){
        this.$isClick(true);
        apiGetAppealList({
          token: this.userToken,
          appealType: type,
          taskType: this.appealForm.task_type
        }).then(res =>{
          this.$isClick(false);
           if (res.code == 1){
            if (type == 1) {
              this.problemOptions = res.msg
            } else{
              this.proposalOptions = res.msg
            }
           } else {
             this.$message.error(res.msg);
           }
        }).catch(res => {
          this.$isClick(false);
            this.$message.error(res.msg)
        })
      },
      //图片上传
      handleAvatarSuccess(res, file) {
         this.imgArr.push(res.msg)
          this.$message.success('上传成功');
        },
        handleExceed(files, fileList){
          if (fileList.length == 3) {
             this.$message.error('最多只上传3张图片');
             return
          }

        },
        handleRemove(file, fileList) {
          var curUrl = ''
          for (var i in this.imgArr) {
            if (this.imgArr[i] == file.response.msg) {
              curUrl = this.imgArr[i]
              this.imgArr.splice(i,1);
            }
          }
          this.$isClick(true);
          apiDelImg({
            imageUrl: curUrl,
            type: 'proof'
          }).then(res =>{
            this.$isClick(false);
             if (res.code == 1){
               this.$message.success('删除成功');
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.$isClick(false);
              this.$message.error(res.msg)
          })
        },
        beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 10;
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 10MB!');
          }
          return isLt2M;
        },
        filterSpecialCharacters(e){
          const assessContent = e.appeal_why.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]|[\uD800-\uDBFF]|[\uDC00-\uDFFF]|[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g,'')
          const newAssessContent = assessContent.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\！\!\:\;\：\；\，\,\.\。\【】\{}\()]/g, "")
          this.$set(e,'appeal_why',newAssessContent)
        },
        _closeDialog() {
          this.$emit('closeDialog')
        },
        _confrimAppeal(){
          if(this.imgArr.length == 0){
            this.$message.error('为了更好处理您的问题，申诉必须提交截图说明');
            return
          }
          this.appealForm.proof_img_url = this.imgArr.join(',')
          this.submitLoading = true
          apiCreateAppealTask(this.appealForm).then(res =>{
            this.submitLoading = false
             if (res.code == 1){
               this.$emit('confrimAppeal')
             } else {
               this.$message.error(res.msg);
             }
          }).catch(res => {
            this.submitLoading = false
              this.$message.error(res.msg)
          })
        }
    }
  }
</script>

<style lang="less">
  .order-info {
    .el-form-item {
      display: inline-block;
    }
  }
  .appeal-dialog-name {
    display: inline-block;
    width: 100px;
    text-align: right;
  }
  .upload-img {
    margin-top: 10px;
  }
  .proposal-div {
    margin-top: 20px;
    .appeal-textarea {
      width: 71% !important;
      vertical-align: text-top !important;
    }
  }

  .img-box {
    display: inline-block;
    margin-right: 10px;
    .el-upload--picture-card {
      width: 120px;
      height: 150px;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      width: 120px;
      height: 150px;
    }
    .el-upload--picture-card i {
      vertical-align: top;
    }

    /deep/ .el-upload-list--picture-card .el-progress {
          height: 80px;
          width: 80px;
     }
    /deep/ .el-progress-circle {
      height: 80px !important;
      width: 80px !important;
      svg {
            height: 80px;
            width: 80px;
      }
    }
  }
   .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }
    .avatar {
      width: 120px;
      height: 150px;
      display: block;
    }
    .appleal-dialog-footer {
      text-align: right;
      margin-top: 25px;
      .appleal-dialog-cancel-btn {
        background: #fff !important;
        color: #333333 !important;
        height: 35px;
		    padding: 0 20px;
        margin-right: 30px !important;
        border: 1px solid #aba7a7 !important;
      }
	  .appleal-dialog-confirm-btn {
		  background-color: #4b95ff!important;
		  color: #fff!important;
		  height: 35px;
		  padding: 0 20px;
	   }
    }
</style>
